<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        #container {
            width: 920px;
            margin: 0 auto;
        }
        .input, form+a {
            margin: 30px 10px;
            width: 400px;
            height: 32px;
        }
        .input>input {
            border: none;
            outline: none;
            border-bottom: 1px dotted darkgray;
            width: 180px;
        }
        .input:last-child>input {
            border: none;
            background-color: red;
            color: white;
            width: 80px;
            height: 25px;
        }
        .input>label {
            display: inline-block;
            width: 80px;
            text-align: right;
        }
        .input:last-child {
            text-align: center;
            border: none;
            margin-left: -20px;
        }
        .input>img {
            vertical-align: middle;
        }
        a {
            text-decoration: none;
            color: blue;
        }
        .hint{
            font-size:12px;
            color:red
            height:20px
        }
    </style>
</head>
<body>
    <div id="container">

        <h2>用户登录</h2>
        <hr>
        <p class="hint">{{hint}}</p>
        <form action="/login/?backurl={{ backurl }}" method="post">
            {% csrf_token %}

            <div class="input">

                <label>用户名：</label>
                <input type="text" name="username">

            </div>
            <div class="input">
                <label>密码：</label>
                <input type="password" name="password">
            </div>
            <div class="input">
                <label>验证码：</label>
                <input type="text" name="captcha">
                <img id="code" src="/captcha/" height="33">
            </div>
            <div class="input">
                <input type="submit" value="登录">
                <input type="reset" value="重置">
            </div>
        </form>
        <a href="/">返回首页</a>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
    $(() => {
        $('#code').on('click', (evt) => {
            $(evt.target).attr('src', '/captcha/?' + Math.random())
        })
    })
    </script>
</body>
</html>